.container {
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.container > div {
  width: 14vw;
}

.container img {
  display: block;
  width: 100%;
  height: auto;
}

.f1 {
  /* 
    filter是特效滤镜，blur是模糊，括号里面的参数是模糊的程度
  */
  filter: blur(2px);
}

.f2 {
  /* 灰度，100%就成了黑白 */
  filter: grayscale(70%);
}

.f3 {
  /* 
    drop-shadow是设置阴影
    第一个参数是x轴方向的阴影大小，
    第二个参数是y轴方向的阴影大小，
    第三个参数是外发光的大小，
    第四个参数是阴影的颜色
    最好是对透明的图片使用，这样就能看到阴影是描边的效果
    阴影可以多个，多个中间用空格分开
  */
  filter: drop-shadow(-10px 10px 0px #ffff00) drop-shadow(0px 0px 10px #ff00ff);
}

.f4 {
  /* 颜色反转 */
  filter: invert(150%);
}

.f5 {
  /* 亮度 */
  filter: brightness(0.5);
}

.f6 {
  /* 对比度 */
  filter: contrast(200%);
}

.f7 {
  /* 饱和度 */
  filter: saturate(200%);
}

.f8 {
  /* hue */
  filter: hue-rotate(230deg);
}

.f9 {
  /* 不透明度 */
  filter: opacity(30%);
}

.f10 {
  filter: sepia(50%);
}

.b1 {
  width: 400px;
  height: 2rem;
  margin: 1rem;
}

.g1 {
  /* 
    linear-gradient表示线性渐变
    第一个参数是渐变的方向，可以省略
    后面的参数都是渐变的颜色
  */
  background: linear-gradient(to right, #ff00ff, #ffff00);
}

.g2 {
  background: linear-gradient(15deg, #ff00ff, #ffff00, #00ffff);
}

.g3 {
  background: linear-gradient(90deg, #ff00ff 40%, #ffff00, #00ffff 90%);
}

.b2 {
  width: 5rem;
  height: 5rem;
  margin: 1rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.g4 {
  background: radial-gradient(#ffffff 30%, #ff00ff);
}

.g5 {
  /* 
    radial-gradient是径向渐变，也就是中心渐变
    at可以指定中心的坐标，后面都是颜色
  */
  background: radial-gradient(at 30% 30%, #ffffff, #ff00ff);
}
